<template>
  <div>
    <!-- 搜索条件开始-->
    <el-row :gutter="20">
      <!-- 搜索条件开始 -->

      <el-col :span="18">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          class="manager-search"
        >
          <!-- 替换内容块开始 -->
          <el-col :span="10">
            <el-form-item label="地址类型" prop="addressType">
              <el-select
                v-model="queryParams.addressType"
                placeholder="地址类型"
                clearable
              >
                <el-option label="离线地址" value="0" />
                <el-option label="在线地址" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 替换内容块结束 -->

          <el-col :span="1.5">
            <el-button type="primary" @click="handleQuery" size="mini">
              <i class="iconfont icon-chaxun btn-icon">查询</i>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="resetQuery" size="mini">
              <i class="iconfont icon-chongzhi btn-icon">重置</i>
            </el-button>
          </el-col>
        </el-form>
      </el-col>
      <!-- 搜索条件结束 -->

      <!-- 工具条开始 -->
      <el-col :span="6">
        <el-row :gutter="20" style="float: right">
          <el-col :span="1.5">
            <!-- 替换内容块开始 -->
            <el-button type="primary" @click="handleAdd" size="mini" plain>
              <i class="iconfont icon-tianjia btn-icon">添加</i>
            </el-button>
          </el-col>
          <!-- 替换内容块结束 -->
        </el-row>
      </el-col>
      <!-- 工具条结束 -->
    </el-row>
    <!-- 搜索条件结束-->

    <!-- 主页面开始 -->
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- 表格开始 -->
        <el-col :span="24">
          <el-table
            :data="tableList"
            @selection-change="handleSelectionChange"
            class="menu-table"
          >
            <template #empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column type="selection" align="center" />
            <el-table-column label="ID" type="index" />
            <el-table-column
              label="地址"
              prop="address"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="地址类型" prop="addressType">
              <template #default="scope">
                <el-tag
                  v-for="(item, index) in dictType"
                  v-show="scope.row.addressType == item.value"
                  :key="index"
                  :type="item.cssName"
                  >{{ item.label }}</el-tag
                >
                <!-- <span v-if="scope.row">{{scope.row.addressType == '0'?'离线地址':'在线地址'}}</span> -->
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="300"
            >
              <template #default="scope">
                <el-button
                  plain
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index)"
                >
                  <i class="iconfont icon-shanchu btn-icon">删除</i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 表格结束 -->
      </el-row>
    </div>
    <!-- 主页面结束 -->
    <!--表单页面-->
    <Form ref="formRef" @getData="getList" />
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";

//分页
import Pagination from "@/components/Pagination/index.vue";
//弹出框表单组件
import Form from "../form/index.vue";
import { all } from "q";
export default {
  components: { Pagination, Form },
  /**
   * 定义变量
   */
  data() {
    return {
      form: {}, //表单
      loading: false, //加载状态
      multiple: false, //控制头部删除按钮状态
      tableList: [], //表格列表
      total: 0, //总条目数
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10,
        addressType: "",
        address: "",
      },
      rules: {
        //表单验证
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur",
          },
        ],
      },
      formObj: {}, //表单数据
      dictType: [
        {
          value: "0",
          label: "离线地址",
          cssName: "success",
        },
        {
          value: "1",
          label: "在线地址",
          cssName: "parmary",
        },
        {
          value: "2",
          label: "睡眠",
          cssName: "danger",
        },
        {
          value: "3",
          label: "下载",
          cssName: "warning",
        },
      ],
    };
  },
  /**
   * 初始化函数
   */
  created() {},
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.getList();
  },
  /**
   * 方法
   */
  methods: {
    /*
     * 表格多选框选中数据，按钮状态改变
     */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    getList(data) {
      //表格数据
      this.tableList.push(data);
      //分页条数
      this.total = this.tableList.length;
      //子传父组件告知值改变了
      this.$emit("tableData", this.tableList);
    },
    /**
     * 删除数据
     * @param {Object} index
     */
    handleDelete(index) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableList.splice(index, 1);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((err) => {
          ElMessage({
            type: "error",
            message: "删除失败!",
          });
        });
    },
    /**
     * 添加
     */
    handleAdd() {
      //新增时清空表单
      console.log(this.$refs.formRef.form, "this.$refs.formRef.form");

      this.$refs.formRef.form = {};
      this.$refs.formRef.open = true;
      this.$refs.formRef.title = "新增";
    },
  },
};
</script>

<style lang="less" scoped></style>
